<template>
    <div class="sort">
        <header>
            <div class="liaotian">
                <i class="iconfont icon-weixin"></i>
            </div>
            <div class="search">
                <i class="iconfont icon-fangdajing"></i>
                <span>学院风jk套装</span>
            </div>
            <div class="go-shopping"> 
                <i class="iconfont icon-fangdajing"></i>
            </div>
        </header>
        <section>
            <div class="list-l">
                <ul class="l-item">
                    <li >正在流行</li>
                    <li :class="{active: index === selectCategoryIndex}" 
                        v-for="(item, index) in leftData" 
                        :key="item.id" 
                        @click="selectCategory(index)" 
                    >{{ item.name }}</li>
                </ul>
            </div>
            <div class="list-r">
                <ul >
                    <li class="shop-list">
                        <!-- 上面部分 二级分类 -->
                        <ul class="r-content">
                            <li v-for="(item, index) in getRightData" :key="item.id">
                                <img :src="item.imgUrl" alt="">
                                <span>{{ item.name }}</span>
                            </li>
                        </ul>
                        <!-- 下面部分 商品列表  略 -->
                    </li>
                </ul>
            </div>
        </section>
    </div>
</template>

<script setup>
import http from '@/common/api/request.js'
import { computed, onMounted, ref } from 'vue';
let leftData = ref([]) // 一级分类
let rightData = ref([]) // 二级分类
onMounted(() => {
    getSortList()
})

const getSortList = async () => {
    let res = await http.$axios({
        url: '/api/goods/list',
    })
    console.log(res) // 包含了商品一二级分类
    let leftArr = []
    let rightArr = []
    
    res.forEach(v => {
        leftArr.push({
            id: v.id,
            name: v.name
        })
        rightArr.push(v.data)
    });
    leftData.value = leftArr
    rightData.value = rightArr
    console.log( rightData.value)
}
// 该变量用来存储选中的一级列表的下标
const selectCategoryIndex = ref(0)
// 一级列表点击事件
const selectCategory = (index) => {
    selectCategoryIndex.value = index
    console.log(selectCategoryIndex.value)
}
// 动态切换二级列表数据
const getRightData = computed(() => {
    return rightData.value[selectCategoryIndex.value]
})
</script>

<style scoped>
	.sort {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.173333rem;
		background-color: #fff;
		border-bottom: 2px solid #f1f1f1;
	}

	header .liaotian {
		line-height: 1.173333rem;
		padding: 0 0.533333rem;
	}

	header .liaotian i {
		color: #666;
		font-size: 0.693333rem;
	}

	header .search {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0.16rem 0.266666rem;
		background-color: #eee;
		border-radius: 0.1875rem;
	}

	header .search i {
		padding-right: 0.16rem;
		color: #666;
		font-size: 0.48rem;
	}

	header .search span {
		color: #666;
		font-size: 0.373333rem;
	}

	header .go-shopping {
		padding: 0 0.266666rem;
		margin-top: 0.15rem;
	}

	header .go-shopping img {
		width: 0.6rem;
		height: 0.6rem;
	}

	section {
		display: flex;
		flex: 1;
		overflow: hidden;
	}

	.list-l {
		width: 2rem;
		background-color: #f1f1f1;
		/* border-right: 1px solid #CCCCCC; */
		overflow: hidden;
	}

	.list-l .l-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.list-l .l-item li {
		width: 100%;
		line-height: 1.333333rem;
		text-align: center;
		font-size: 0.373333rem;
	}

	.list-l .l-item li.active {
		color: #ff5777;
		border-left: 6px solid #ff5777;
		background-color: #fff;
	}

	.list-r {
		flex: 1;
		overflow: hidden;
		background-color: #fff;
	}

	.list-r .shop-list {
		text-align: center;
	}

	.list-r .shop-list .r-content {
		display: flex;
		flex-wrap: wrap;
	}

	.list-r .shop-list .r-content li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33.33%;
		padding: 0.266666rem 0;
	}

	.list-r .shop-list .r-content li img {
		width: 1.8rem;
		height: 1.8rem;
	}

	.list-r .shop-list .r-content li span {
		margin-top: 0.3125rem;
		font-size: 0.3rem;
	}
</style>